<template>
  <Header></Header>
  <Drawer v-if="isShow == true"></Drawer>
  <el-breadcrumb separator="/" style="font-size: 20px;color: #ff5722;" v-if="isShow == true">
    <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/pageList/' + groupId }">档案管理</el-breadcrumb-item>
    <el-breadcrumb-item>查看报告</el-breadcrumb-item>
  </el-breadcrumb>

  <el-affix :offset="400" style="float: right;height: 60px" :position="bottom" v-if="isShow == true">
    <el-button type="primary" style="height: 60px;background-color: #ff5722;border: #ff5722" @click="onKeep">保存建议
    </el-button>
  </el-affix>

  <div class="report">
    <div id="print-all">
      <div id="basic">
        <div style="display: flex">
          <div style=" width: 100%; background-color:#ff5722; height: 100px; text-align: center; line-height: 100px;">
            <span style="font-size: 30px; font-weight: bold; color: #ffffff">慢性病人</span><span
              style="font-size: 30px; color: #666666; margin-left: 20px">基本信息报告</span>
          </div>
          <!-- <div style="height: 100px; width: 40%;">
            <img src="../assets/img/11.jpg" style="height: 100%; width: 100%" alt="" />
          </div> -->
        </div>
        <!-- 基本信息 -->
        <div style="width: 100%; height: 40px; background-color: #ff5722; margin-top: 10px; display: flex;">
          <div><img src="../assets/img/12_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">慢性病人基本信息</div>
        </div>
        <div style="width: 1070px; border-top: 2px solid #ff5722; border-right: 2px solid #ff5722;  margin-top: 10px">
          <div style="display: flex">
            <div
              style="background-color: #ff5722; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              检测日期</div>
            <div
              style="width: 90%; height: 40px; border-bottom: 2px solid #ff5722; line-height: 40px; text-indent: 20px;">
              {{ report_time }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              慢性病人姓名
            </div>
            <div
              style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              {{ contents.name ?? '[]' }}
            </div>
            <div
              style="background-color: #ff5722;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722;">
              手机号
            </div>
            <div
              style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722;">
              {{ contents.mobile ?? '[]' }}
            </div>
            <div
              style="background-color: #ff5722; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722;">
              年龄
            </div>
            <div
              style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              {{ contents.age ?? '[]' }}岁
            </div>
            <div
              style=" background-color: #ff5722; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              身高
            </div>
            <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #ff5722;">
              {{ contents.height ?? '[]' }}CM
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              体重
            </div>
            <div
              style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; ">
              {{ contents.weight ?? '[]' }}KG
            </div>
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              孕周数
            </div>
            <div
              style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; ">
              {{ contents.gestational_weeks ?? '[]' }}周
            </div>
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              末次月经
            </div>
            <div
              style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; ">
              {{ contents.pre_weight ?? '[]' }}
            </div>
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              预产期
            </div>
            <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #ff5722;">
              {{ contents.edc ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              多胎
            </div>
            <div
              style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; ">
              {{ contents.twin ?? '[]' }}
            </div>
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              血压
            </div>
            <div
              style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; ">
              {{ contents.blood_pressure ?? '[]' }}
            </div>
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              腹围
            </div>
            <div
              style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; ">
              {{ contents.abdominal_girth ?? '[]' }}
            </div>
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              怀孕时间
            </div>
            <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #ff5722;">
              {{ contents.pregnancy_time ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              生日
            </div>
            <div
              style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; ">
              {{ contents.birthday ?? '[]' }}
            </div>
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              未怀孕腹围
            </div>
            <div
              style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; ">
              {{ contents.pre_abdominal_girth ?? '[]' }}
            </div>
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              血型
            </div>
            <div
              style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #ff5722; border-bottom: 2px solid #ff5722; ">
              {{ contents.xuexing_value ?? '[]' }}
            </div>
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              民族
            </div>
            <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #ff5722;">
              {{ contents.minzu_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;">
              教育程度
            </div>
            <div style="
              width: 90%;
              height: 40px;
              border-bottom: 2px solid #ff5722;
              line-height: 40px;
              text-indent: 20px;
            ">
              {{ contents.jiaoyu_value }}
            </div>

          </div>

        </div>
        <!-- 其他信息 -->
        <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
          <div><img src="../assets/img/12_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            主诉与病史
          </div>
        </div>
        <div style="width: 1070px; border-top: 2px solid #ff5722; border-right: 2px solid #ff5722; margin-top: 10px">
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              妊娠不良习惯
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.Bad_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              妊娠营养情况
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.disease_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              过去疾病
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.Pastdisease_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              家族病史
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.family_history_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              孕期不良习惯
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.habits_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              水肿情况
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.edema_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              妊娠疾病
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.pregnancy_value ?? '[]' }}
            </div>
          </div>
        </div>
        <!-- 孩子临床表现 -->
        <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
          <div><img src="../assets/img/12_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            膳食与过敏
          </div>
        </div>
        <div style="width: 1070px;  border-top: 2px solid #ff5722; border-right: 2px solid #ff5722; margin-top: 10px">
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              过敏食物
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.allergy_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              食物不耐受
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.intolerance_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              不适合膳食
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.noLikeDiet_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              适合的膳食
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.LikeDiet_value ?? '[]' }}
            </div>
          </div>

        </div>
        <!-- 食物过敏 -->
        <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
          <div><img src="../assets/img/12_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            运动调查
          </div>
        </div>
        <div style="width: 1070px; border: 2px solid #ff5722; margin-top: 10px">
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;border-bottom: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              禁止做的运动
            </div>
            <div style="width: 90%;border-bottom: 2px solid #ff5722;line-height: 40px;padding:0px 20px;">
              {{ contents.forbidLikeMotion_value ?? '[]' }}
            </div>
          </div>
          <div style="display: flex">
            <div
              style="background-color: #ff5722;width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #ff5722;display:flex;align-items: center;justify-content:center;">
              可以做的运动
            </div>
            <div style="width: 90%;line-height: 40px;padding:0px 20px;">
              {{ contents.LikeMotion_value ?? '[]' }}
            </div>
          </div>
        </div>
        <div style="display: flex;margin-top:20px;">
          <div style=" width: 100%; background-color:#ff5722; height: 100px; text-align: center; line-height: 100px;">
            <span style="font-size: 30px; font-weight: bold; color: #ffffff">慢性病人</span><span
              style="font-size: 30px; color: #666666; margin-left: 20px">体成分数据分析报告</span>
          </div>
          <!-- <div style="height: 100px; width: 40%">
            <img src="../assets/img/11.jpg" style="height: 100%; width: 100%" alt="" />
          </div> -->
        </div>
        <!-- 体成分数据分析 -->
        <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
          <div><img src="../assets/img/13_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            体成分数据分析
          </div>
        </div>
        <ChildViewcomposition></ChildViewcomposition>
        <!-- 节段水分分析 -->
        <div style="margin-top: 10px; margin-bottom: 10px; margin-left: 30px"></div>
        <div style="display: flex;margin-top:20px;">
          <div style=" width: 100%; background-color:#ff5722; height: 100px; text-align: center; line-height: 100px;">
            <span style="font-size: 30px; font-weight: bold; color: #ffffff">慢性病人</span><span
              style="font-size: 30px; color: #666666; margin-left: 20px">膳食营养分析报告</span>
          </div>
          <!-- <div style="height: 100px; width: 40%">
            <img src="../assets/img/11.jpg" style="height: 100%; width: 100%" alt="" />
          </div> -->
        </div>
        <div style="width: 100%; height: 40px;background-color: #ff5722;margin-top: 20px;display: flex;">
          <div><img src="../assets/img/14_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            膳食记录
          </div>
        </div>
        <div style="width:1071px;border:2px solid #ff5722;margin:20px auto;text-align:center;">
          <div style="display:flex">
            <div class="biao1" style="width:15%;height:40px;line-height:40px">菜名</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">能量</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">脂肪</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">钙</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">镁</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">锌</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">维生素A</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">维生素B1</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">维生素C</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">蛋白质</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">碳水</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">钠</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">铁</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">硒</div>
            <div class="biao1" style="width:5.666%;height:40px;line-height:40px">维生素E</div>
            <div class="biao3" style="width:5.666%;height:40px;line-height:40px">维生素B2</div>
          </div>
          <div v-for="(item, index) in diet" :key="index">
            <div style="display:flex;">
              <div class="biao2" style="width:15%;height:40px;line-height:40px">{{ item.food_name }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.energy ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.fat ?? 0 }} </div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.calcium ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.magnesium ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.zinc ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.vitamin_a ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.vitamin_b1 ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.vitamin_c ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.protein ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.carbohydrate ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.sodium ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.iron ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.selenium ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.vitamin_e ?? 0 }}</div>
              <div class="biao2" style="width:5.666%;height:40px;line-height:40px">{{ item.vitamin_b2 ?? 0 }}</div>
            </div>
          </div>
        </div>

        <!-- 膳食评价 -->
        <GravidaViewDietary></GravidaViewDietary>
        <!-- 营养素 -->

        <div style="width: 100%;height: 40px; background-color: #ff5722;margin-top: 20px;display: flex;">
          <div><img src="../assets/img/17_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            能量&营养摄入量分析
          </div>
        </div>
        <div style="width:1071px;border:2px solid #ff5722;margin:20px auto;">
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">能量</div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="energys">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">蛋白质</div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="proteins">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">脂肪</div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="fats">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 碳水化合物
            </div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="carbohydrates">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">钙</div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="calciums">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 钠</div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="sodiums">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 镁</div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="magnesiums">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 铁</div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="irons">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 锌</div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="zincs">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 硒</div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="seleniums">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素A
            </div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="vitamin_as">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素E
            </div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="vitamin_es">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素B1
            </div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="vitamin_b1s">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao1"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素B2
            </div>
            <div class="biao4" style="width:90%;padding-left: 5px;">
              <div v-html="vitamin_b2s">
              </div>
            </div>
          </div>
          <div style="display:flex">
            <div class="biao5"
              style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素C
            </div>
            <div class="biao7" style="width:90%;padding-left: 5px;">
              <div v-html="vitamin_cs">
              </div>
            </div>
          </div>
        </div>


        <div style="width: 100%;height: 40px;background-color: #ff5722; margin:auto;margin-top: 20px;display: flex;">
          <div><img src="../assets/img/19_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            膳食结构分析(日均值)
          </div>
        </div>
        <div style="width:1071px;margin:20px auto;border:2px solid #ff5722;text-align:center;line-height:40px">
          <div style="display:flex;">
            <div class="biao1" style="width:12.5%">膳食结构</div>

            <div class="biao1" v-for="(item, index) in pagoda" :key="index" style="width:12.5%">{{ item.title }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao1" style="width:12.5%">推荐(g)</div>
            <div class="biao2" v-for="(item, index) in pagoda" :key="index" style="width:12.5%">{{ item.systam_down
            }}~{{
  item.systam_up
}}</div>
          </div>
          <div style="display:flex;">
            <div class="biao5" style="width:12.5%">实际</div>
            <div class="biao6" v-for="(item, index) in pagoda" :key="index" style="width:12.5%">{{ item.product_energy
            }}
            </div>
          </div>
        </div>

        <!-- 孕期营养干预报告 -->
        <div style="display: flex; margin-top: 20px;width:100%">
          <div style=" width: 100%;  background-color:#ff5722;  height: 100px; text-align: center;  line-height: 100px; ">
            <span style="font-size: 30px; font-weight: bold; color: #ffffff">慢性病人</span><span
              style="font-size: 30px; color: #666666; margin-left: 20px">喂养习惯报告</span>
          </div>
          <!-- <div style="height: 100px; width: 40%">
            <img src="../assets/img/11.jpg" style="height: 100%; width: 100%" alt="" />
          </div> -->
        </div>
        <div style="  width: 100%; height: 40px; background-color: #ff5722; margin-top: 20px;  display: flex; ">
          <div><img src="../assets/img/21_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            慢性病人饮食及生活方式原则
          </div>
        </div>
        <div style="width: 1061px;min-height: 150px; border: 2px solid #ff5722;margin-top: 20px;padding-left:10px"
          v-html="principle">
        </div>
        <!-- 膳食方案明细 -->
        <div style="width: 100%; height: 40px;background-color: #ff5722;margin-top: 20px;display: flex;">
          <div><img src="../assets/img/23_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            膳食方案明细
          </div>
        </div>
        <div style="width:1071px;margin:20px auto;border:2px solid #ff5722;line-height:40px;text-align:center;">
          <div style="display:flex;">
            <div class="biao1" style="height:40px;width:50%;color: #FFFFFF;">名称</div>
            <div class="biao3" style="height:40px;width:50%;color: #FFFFFF;">推荐值</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">能量</div>
            <div class="biao4" style="height:40px;width:50%;">{{ letEnergy.start }}～{{ letEnergy.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">碳水化合物</div>
            <div class="biao4" style="height:40px;width:50%;">{{ carbohydrate.start }}～{{ carbohydrate.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">蛋白质</div>
            <div class="biao4" style="height:40px;width:50%;">{{ protein.start }}～{{ protein.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">脂肪</div>
            <div class="biao4" style="height:40px;width:50%;">{{ fat.start }}～{{ fat.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">碳水化合物</div>
            <div class="biao4" style="height:40px;width:50%;">{{ carbohydrate.start }}～{{ carbohydrate.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">钙</div>
            <div class="biao4" style="height:40px;width:50%;">{{ calcium.start }}～{{ calcium.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">钠</div>
            <div class="biao4" style="height:40px;width:50%;">{{ sodium.start }}～{{ sodium.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">镁</div>
            <div class="biao4" style="height:40px;width:50%;">{{ magnesium.start }}～{{ magnesium.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">铁</div>
            <div class="biao4" style="height:40px;width:50%;">{{ iron.start }}～{{ iron.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">锌</div>
            <div class="biao4" style="height:40px;width:50%;">{{ zinc.start }}～{{ zinc.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">硒</div>
            <div class="biao4" style="height:40px;width:50%;">{{ selenium.start }}～{{ selenium.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">维生素A</div>
            <div class="biao4" style="height:40px;width:50%;">{{ vitamin_a.start }}～{{ vitamin_a.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">维生素E</div>
            <div class="biao4" style="height:40px;width:50%;">{{ vitamin_e.start }}～{{ vitamin_e.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">维生素B1</div>
            <div class="biao4" style="height:40px;width:50%;">{{ vitamin_b1.start }}～{{ vitamin_b1.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">维生素B2</div>
            <div class="biao4" style="height:40px;width:50%;">{{ vitamin_b2.start }}～{{ vitamin_b2.end }}</div>
          </div>
          <div style="display:flex;">
            <div class="biao2" style="height:40px;width:50%;">维生素C</div>
            <div class="biao4" style="height:40px;width:50%;">{{ vitamin_c.start }}～{{ vitamin_c.end }}</div>
          </div>
        </div>

        <div style=" width: 100%;height: 40px;background-color: #ff5722;margin-top: 20px;display: flex;">
          <div><img src="../assets/img/23_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;"> 一周膳食清单</div>
        </div>
        <div style="margin:20px auto;border:2px solid #ff5722;padding-bottom:325px">
          <div class="dietOn" v-for="item in diet_analysis" :key="item">
            <div class="time-botton">
              <img src="../assets/img/evaluaction_service_icon.png" alt="" style="width: 15px; height: 15px" />
              {{ item.pName }}
            </div>

            <div class="plates">
              <div class="time-type time-left-color">早餐</div>
              <div class="der">
                <div style="margin-left:6%;padding-top: 6%;display:flex;">
                  <span class="plates-top-img" v-for="breakfast in item.早餐" :key="breakfast"><img
                      :src="'http://' + baseUrl + '/' + breakfast.meal_image" alt=""
                      style="width: 100%;height: 100%"></span>
                  <span class="plates-top-img" v-for="earlier in item.早点" :key="earlier"><img
                      :src="'http://' + baseUrl + '/' + earlier.meal_image" alt=""
                      style="width: 100%;height: 100%"></span>
                </div>
              </div>
              <div class="platesFoods">
                <div>大小：{{ item.multiple }}倍</div>
                <div> 早餐7:00: <span v-for="breakfast in item.早餐" :key="breakfast">
                    <o class="foodsNames">{{ breakfast.food_name }}</o> 重量:{{ breakfast.weight }}g;
                  </span>
                </div>
                <div>早点10:00: <span v-for="earlier in item.早点" :key="earlier">
                    <o class="foodsNames">{{ earlier.food_name }}</o> 重量:{{ earlier.weight }}g;
                  </span>
                </div>
              </div>
            </div>

            <div class="plates">
              <div class="time-type time-common-color">午餐</div>
              <div class="der">
                <div style="margin-left: 6%; padding-top: 6%"> <span class="plates-top-img" v-for="lunch in item.午餐"
                    :key="lunch"><img :src="'http://' + baseUrl + '/' + lunch.meal_image" alt=""
                      style="width: 100px; height: 100px" /></span>
                  <span class="plates-top-img" v-for="noon in item.午点" :key="noon"><img
                      :src="'http://' + baseUrl + '/' + noon.meal_image" alt=""
                      style="width: 100px; height: 100px" /></span>
                </div>
              </div>

              <div class="platesFoods">
                <div>大小：{{ item.multiple }}倍</div>
                <div>午餐12:00: <span v-for="lunch in item.午餐" :key="lunch">
                    <o class="foodsNames">{{ lunch.food_name }}</o> 重量:{{ lunch.weight }}g;
                  </span>
                </div>
                <div> 午点15:00: <span v-for="noon in item.午点" :key="noon">
                    <o class="foodsNames">{{ noon.food_name }}</o> 重量:{{ noon.weight }}g;
                  </span>
                </div>
              </div>
            </div>

            <div class="plates">
              <div class="time-type time-right-color">晚餐</div>
              <div class="der">
                <div style="margin-left: 6%; padding-top: 6%"><span class="plates-top-img" v-for="dinner in item.晚餐"
                    :key="dinner"><img :src="'http://' + baseUrl + '/' + dinner.meal_image" alt=""
                      style="width: 100px; height: 100px" /></span>
                  <span class="plates-top-img" v-for="late in item.晚点" :key="late"><img
                      :src="'http://' + baseUrl + '/' + late.meal_image" alt=""
                      style="width: 100px; height: 100px" /></span>
                </div>
              </div>

              <div class="platesFoods">
                <div>大小：{{ item.multiple }}倍</div>
                <div>
                  晚餐18:00:
                  <span v-for="dinner in item.晚餐" :key="dinner">
                    <o class="foodsNames">{{ dinner.food_name }}</o> 重量:{{ dinner.weight }}g;
                  </span>
                </div>
                <div>晚点21:00: <span v-for="late in item.晚点" :key="late">
                    <o class="foodsNames">{{ late.food_name }}</o> 重量:{{ late.weight }}g;
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 食物选择建议 -->
        <div style=" width: 100%; height: 40px; background-color: #ff5722; margin-top: 20px;display: flex; ">
          <div><img src="../assets/img/24_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">食物选择建议</div>
        </div>
        <!-- <textarea name="" id="" cols="30" rows="10" style="padding: 10px 10px;border: 2px solid #ff5722; width: 1050px; min-height: 500px;resize:none;outline:medium;"></textarea> -->
        <div style="padding: 10px 10px;border: 2px solid #ff5722; width: 1050px; min-height: 500px;">
          <div v-for="(item, index) in pagoda " :key="index">
            {{ item.title }}
            <div>
              <div v-if="item.product_energy < item.systam_down">
                {{ proposal.filter((ite, index) => {
                  return ite.food_product_id == item.food_product_id
                })[0].content
                }}
              </div>
              <div v-if="item.product_energy > item.systam_up">
                {{ proposal1.filter((ite, index) => {
                  return ite.food_product_id == item.food_product_id
                })[0].content
                }}
              </div>
              <div v-if="item.product_energy >= item.systam_down && item.product_energy <= item.systam_up">
                {{ proposal2.filter((ite, index) => {
                  return ite.food_product_id == item.food_product_id
                })[0].content
                }}
              </div>
            </div>
          </div>
        </div>
        <div>
        </div>
        <!-- 孕期营养处方 -->

        <!-- 生长发育曲线图 -->
        <div style=" margin-top: 20px;display:flex">
          <div style="width: 100%;background-color:#ff5722;height: 100px;text-align: center;line-height: 100px; ">
            <span style="font-size: 30px; font-weight: bold; color: #ffffff">慢性病人</span><span
              style="font-size: 30px; color: #666666; margin-left: 20px">生长发育曲线图</span>
          </div>
         

        </div>
        <div style="display:flex;border: 2px solid #ff5722;margin-top:20px">
          <div id="myChart1" :style="{ width: '33%', height: '550px', }"></div>
          <div id="myChart2" :style="{ width: '33%', height: '550px', }"></div>
          <div id="myChart3" :style="{ width: '33%', height: '550px', }"></div>
        </div>
        <div style="display: flex; margin-top: 20px">
          <div style="width: 100%;background-color:#ff5722;height: 100px;text-align: center;line-height: 100px; ">
            <span style="font-size: 30px; font-weight: bold; color: #ffffff">慢性病人</span><span
              style="font-size: 30px; color: #666666; margin-left: 20px">营养处方报告</span>
          </div>
          <!-- <div style="height: 100px; width: 40%">
            <img src="../assets/img/11.jpg" style="height: 100%; width: 100%" alt="" />
          </div> -->
        </div>
        <!-- 运动处方 -->
        <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
          <div><img src="../assets/img/26_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            喂养建议
          </div>
        </div>
        <div style="width: 1050px;border: 2px solid #ff5722;min-height: 100px;margin-top: 20px;padding: 10px 10px;">
          <textarea name="" id="" cols="30" rows="10" style="width:100%;border:none;resize: none;outline: none;"></textarea>

        </div>
        <!-- 评估指导 -->
        <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
          <div><img src="../assets/img/27_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            营养建议
          </div>
        </div>
        <div style="width: 1050px;border: 2px solid #ff5722;min-height: 100px; margin-top: 20px;padding: 10px 10px;">
          <textarea name="" id="" cols="30" rows="10" style="width:100%;border:none;resize: none;outline: none;"></textarea>
        </div>
        <!-- 医生建议 -->
        <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
          <div><img src="../assets/img/27_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            医生建议
          </div>
        </div>
        <div style="width: 1050px;border: 2px solid #ff5722;min-height: 100px; margin-top: 20px;padding: 10px 10px;">
          <textarea name="" id="" cols="30" rows="10" style="width:100%;border:none;resize: none;outline: none;"></textarea>
        </div>
        <!-- 复诊预约 -->
        <div style="width: 100%;height: 40px;background-color: #ff5722;margin-top: 10px;display: flex;">
          <div><img src="../assets/img/27_2.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            复诊预约
          </div>
        </div>
        <!-- <div style="width: 1050px; border: 2px solid #ff5722; min-height: 60px; margin-top: 20px;display: flex;">
          <div
            style="width: 13%;line-height: 60px;background-color: #ff5722;color: #fff;height: 100%;text-align: center; border-right: 2px solid #ff5722;">
            复查建议及时间
          </div>
          <div>
            <div style="margin-top: 10px; margin-left: 10px">
              复诊建议∶为避免健康风险，请及时到院复诊
            </div>
            <div style="margin-top: 5px; margin-left: 10px">
              复查建议及时间 复诊时间∶2021-12-01
            </div>
          </div>
        </div> -->
        <div style="width: 30%;height: 40px;border: 2px solid #ff5722;margin-top: 20px;margin-bottom: 20px;">
          <div
            style=" width: 42%;line-height: 40px;background-color: #ff5722;color:#fff;height: 100%;text-align: center;border-right: 2px solid #ff5722;">
            医师签字
          </div>
          <div></div>
        </div>
      </div>
    </div>
  </div>


  <div style="text-align: center;height: 100px;line-height: 100px">
    <el-radio-group v-model="typeActive">
      <el-radio label="全部">全部</el-radio>
      <template v-for="item in types">
        <el-radio :label="item">{{ item }}</el-radio>
      </template>
    </el-radio-group>
    <div>
      <el-button type="primary" style="height: 60px;background-color: #ff5722;border: #ff5722" @click="onClickPrint">
        打印报告</el-button>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, ref, watch } from 'vue';
import { ElMessage } from "element-plus";
import * as api from "../api/loginHttp";
import http, { baseUrl } from "../utils/http";
// import GravidaViewDietary from './common/GravidaVD.vue';
import Header from './common/Header.vue';
import Drawer from './common/Drawer.vue';
// import Childcomposition from './common/Childcomposition.vue';
// import Childdietary from './common/Childdietary.vue';
import { useRoute, useRouter } from "vue-router"
import PrintJS from 'print-js'
import * as echarts from 'echarts'
import { ElNotification } from 'element-plus'
// import ChildViewcomposition from './common/GravidaViewcomposition.vue';

const router = useRouter()
const onBmishow = ref(1)
const route = useRoute()
const groupId = ref()
const id = ref()
const labName = ref()
const reportId = ref()
const printId = ref()
const myChart = ref()
const myChart1 = ref()
const myChart2 = ref()

const username = ref()
const guardian = ref()
const birthStatus = ref()

const qxty = ref()
const hospital_name = ref()
const report_time = ref()
const birth = ref()
const high_contents = ref({})
const early_intervention = ref({})
const data = ref()
const Monitoring_content = ref({})
const contents = ref({})
const isShow = ref(true)
const readonly = ref(true)
const proposal = ref({})
const proposal1 = ref({})
const proposal2 = ref({})
const display = ref(false)
const diet = ref({})
const pagoda = ref({})
const principle = ref({})
const intake = ref({})
const letEnergy = ref({ energy: 0, start: 0, end: 0 });
const energys = ref({})
const protein = ref({ energy: 0, start: 0, end: 0 });
const proteins = ref({})
const fat = ref({ energy: 0, start: 0, end: 0 });
const fats = ref({})
const carbohydrate = ref({ energy: 0, start: 0, end: 0 });
const carbohydrates = ref({})
const calcium = ref({ energy: 0, start: 0, end: 0 });
const calciums = ref({})
const sodium = ref({ energy: 0, start: 0, end: 0 });
const sodiums = ref({})
const magnesium = ref({ energy: 0, start: 0, end: 0 });
const magnesiums = ref({})
const iron = ref({ energy: 0, start: 0, end: 0 });
const irons = ref({})
const zinc = ref({ energy: 0, start: 0, end: 0 });
const zincs = ref({})
const selenium = ref({ energy: 0, start: 0, end: 0 });
const seleniums = ref({})
const vitamin_a = ref({ energy: 0, start: 0, end: 0 });
const vitamin_as = ref({})
const vitamin_e = ref({ energy: 0, start: 0, end: 0 });
const vitamin_es = ref({})
const vitamin_b1 = ref({ energy: 0, start: 0, end: 0 });
const vitamin_b1s = ref({})
const vitamin_b2 = ref({ energy: 0, start: 0, end: 0 });
const vitamin_b2s = ref({})
const vitamin_c = ref({ energy: 0, start: 0, end: 0 });
const vitamin_cs = ref({})
const diet_analysis = ref({})
const kcalType = ref(2)
const form = ref({
  elText: '',
  elTextTwo: '',
  elTextThree: '',
})

const types = ref(['基本信息', '体成分分析', '膳食营养分析', '慢性病人生长发育曲线图', '喂养习惯报告', '营养处方报告'])
const typeActive = ref(-1)

const fetchData = async () => {
  if (route.params.groupId) {
    groupId.value = route.params.groupId
    id.value = route.params.id
    reportId.value = route.params.reportId

    username.value = route.params.username
    guardian.value = route.params.guardian
    birthStatus.value = route.params.birth

    if (username.value && guardian.value && birthStatus.value) {
      isShow.value = false
    }

    if (groupId.value == 3) {
      labName.value = '婴幼儿营养测评'
    } else if (groupId.value == 5) {
      labName.value = '孕产妇营养测评'
    } else if (groupId.value == 6) {
      labName.value = '成年人营养测评'
    } else if (groupId.value == 7) {
      labName.value = '慢性病营养测评'
    } else if (groupId.value == 8) {
      labName.value = '团体营养测评'
    }

  }
  http.get('api/archives/getGenerateStatus?id=' + id.value + '&reportId=' + reportId.value).then((res) => {
    if (res.data.code === 0) {
      ElMessage.error(res.data.msg)
      return false;
    }
    if (res.data.data === 0) {
      http.get('api/archives/generate?id=' + id.value + '&reportId=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {
        if (res.data.code === 0) {
          ElMessage.error(res.data.msg)
          return false;
        }
      })
    }
  })

  http.get('api/gravida/viewReportMember?id=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {

    if (res.data.code === 0) {
      ElMessage.error(res.data.msg)
      return false;
    } else {

    }
    if (res.data.data.is_high == 1) {
      display.value = true
    } else {
      display.value = false
    }


    birth.value = $getTimes(res.data.data.contents.birth)
    contents.value = res.data.data.contents;
    report_time.value = res.data.data.times

    if (res.data.data.feed_advice != '' && res.data.data.feed_advice != null) {
      form.value.elText = res.data.data.feed_advice;
    } else {
      form.value.elText = '当膳食方案中有食谱或食材不符合您的膳食习惯时，请先与医生确认，若医生认为某些食材对儿童的膳食营养改善很重要，要求不能置换或最好不要置换；其他类可进行同类食材替换，例如：猪肉、牛肉、羊肉之间可互换，鸡肉、鸭肉、鱼类之间可互换，蔬菜间可互换，米面间可互换，但要注意不要更改食材用量。\n' +
        '给儿童烹调食物时，宜尽可能保持食物的原味，口味以清淡为宜，少放调料。\n' +
        '每天应当进行至少1小时的户外游戏或运动，每天看电视、玩平板电脑的累计时间不超过2小时，日常生活中还可适当增加一些有氧活动例如：自行车、慢跑、跳绳、仰卧起坐、游泳等。';
    }

    if (res.data.data.nutrition_advice != '' && res.data.data.nutrition_advice != null) {
      form.value.elTextTwo = res.data.data.nutrition_advice;
    } else {
      form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
        '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
      if (contents._rawValue.hair_value != '' || contents._rawValue.oralCavity_value != '' || contents._rawValue.neck_value != '' || contents._rawValue.Neuropathy_value != '' || contents._rawValue.symptoms_value != '') {
        form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
          '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
      } else if (contents._rawValue.eye_value != '') {
        form.value.elTextTwo = '平衡膳食，多摄入动物肝、肾、奶、蛋和深绿或红黄蔬菜、水果等富维生素A和β胡萝卜素食物。婴儿要及时添加含动物肝等辅食，没有母乳的婴儿需配方奶喂养。生后及时按预防量补充维生素A。幼儿膳食中要注意脂肪和含维生素A和β胡萝卜素食物搭配食用。患消化系统疾病及消耗性疾病的患儿需及时补充维生素A制剂。\n' +
          '长期摄入不足是导致维生素A缺乏的主要原因，儿童维生素A的主要来自1、肝脏、鱼油、奶制品、鸡蛋等动物性食物；2、绿叶蔬菜以及黄色或橙色的水果和蔬菜中富含各种胡罗卜素，可在体内转变为维生素A。对于人体来说，动物性食物中的VA要比植物性中的VA更容易吸收。';
      } else if (contents._rawValue.skin_value != '') {
        form.value.elTextTwo = '谷类、硬果、动物内脏、蛋类及酵母中维生素B1含量丰富，但需要注意谷类加工过度可损失维生素B1，以及生鱼和贝类含有破坏维生素B1的酶，所以在日常饮食中不长期食用精米、生鱼和贝类。还需要注意的是维生素B1易溶于水，在碱性条件下易受热破坏，所以过分淘米或烹调中加碱也可导致维生素B1大量损失。\n' +
          '富含维生素B2的食物主要是动物肝脏（如肝、肾、心）等、蛋黄和乳类。谷类的精细加工会导致所含的维生素B2流失，所以儿童日常饮食中还需要增加粗粮的比例以及保证每日鸡蛋和牛奶的摄入。';
      } else if (contents._rawValue.sign_value != '') {
        form.value.elTextTwo = '足量的食物，平衡膳食，规律就餐，不偏食不挑食，每天饮奶多喝水，避免含糖饮料，是保障儿童生长发育的关键。日常生活中选择健康有营养的零食，避免含糖饮料和高脂肪的油炸食物，导致儿童正餐不按量食用。\n' +
          '营养不良的儿童，要在保证能量摄入充足的基础上，增加鱼、禽、蛋、瘦肉、豆制品等富含优质蛋白质的食物的摄入，经常使用奶及奶制品，每天吃新鲜的蔬菜水果；保证一日三餐，纠正偏食和过度节食等不健康饮食行为，并保持适宜的身体活动。';
      } else if (contents._rawValue.sign_value != '') {
        form.value.elTextTwo = '奶和奶制品是儿童钙的主要来源，也是最佳来源。绿色蔬菜、大豆及其制品特殊含有较高的钙，可作为补充来源。 需要特别注意的是钙在体内主动吸收需要维生素D，维生素D缺乏或不足时，钙主动吸收下降间接造成改缺乏。此外，运动锻炼也是骨骼健康的重要决定因素，跑、跳等中等程度的运动有利于骨骼钙沉积，达到更高的估量峰值。'
      }
    }

    form.value.elTextThree = res.data.data.doctor_advice;
  })


  let params = {
    'groupId': groupId.value,
    'id': id.value,
    'reportId': reportId.value,
    'username': username.value,
    'guardian': guardian.value,
    'birth': birth.value,
  }
  const data = await api.energy(params);


  if (data.data.code == 0) {
    ElMessage.error(data.data.msg)
    return false;
    await router.push({ 'path': '/Evaluation/' + groupId.value + '/' + id })
  }

  if (!data.data.data.diet_analysis) {
    ElMessage.error(data.data.msg)
    return false;
    await router.push({ 'path': '/Evaluation/' + groupId.value + '/' + id })
  }

  for (let i = 0; i < data.data.data.diet_analysis.length; i++) {
    switch (i) {
      case 0:
        data.data.data.diet_analysis[i]['pName'] = '周一';
        break
      case 1:
        data.data.data.diet_analysis[i]['pName'] = '周二';
        break
      case 2:
        data.data.data.diet_analysis[i]['pName'] = '周三';
        break
      case 3:
        data.data.data.diet_analysis[i]['pName'] = '周四';
        break
      case 4:
        data.data.data.diet_analysis[i]['pName'] = '周五';
        break
      case 5:
        data.data.data.diet_analysis[i]['pName'] = '周六';
        break
      case 6:
        data.data.data.diet_analysis[i]['pName'] = '周日';
        break
    }
  }


  diet_analysis.value = data.data.data.diet_analysis;

  for (let i = 0; i < data.data.data.diet.length; i++) {

    if (parseInt(data.data.data.diet[i]['energy']) !== parseInt(data.data.data.diet[i]['energy'])) {
      data.data.data.diet[i]['energy'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['protein']) !== parseInt(data.data.data.diet[i]['protein'])) {
      data.data.data.diet[i]['protein'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['fat']) !== parseInt(data.data.data.diet[i]['fat'])) {
      data.data.data.diet[i]['fat'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['carbohydrate']) !== parseInt(data.data.data.diet[i]['carbohydrate'])) {
      data.data.data.diet[i]['carbohydrate'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['calcium']) !== parseInt(data.data.data.diet[i]['calcium'])) {
      data.data.data.diet[i]['calcium'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['sodium']) !== parseInt(data.data.data.diet[i]['sodium'])) {
      data.data.data.diet[i]['sodium'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['magnesium']) !== parseInt(data.data.data.diet[i]['magnesium'])) {
      data.data.data.diet[i]['magnesium'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['iron']) !== parseInt(data.data.data.diet[i]['iron'])) {
      data.data.data.diet[i]['iron'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['zinc']) !== parseInt(data.data.data.diet[i]['zinc'])) {
      data.data.data.diet[i]['zinc'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['selenium']) !== parseInt(data.data.data.diet[i]['selenium'])) {
      data.data.data.diet[i]['selenium'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['vitamin_a']) !== parseInt(data.data.data.diet[i]['vitamin_a'])) {
      data.data.data.diet[i]['vitamin_a'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['vitamin_e']) !== parseInt(data.data.data.diet[i]['vitamin_e'])) {
      data.data.data.diet[i]['vitamin_e'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['vitamin_b1']) !== parseInt(data.data.data.diet[i]['vitamin_b1'])) {
      data.data.data.diet[i]['vitamin_b1'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['vitamin_b2']) !== parseInt(data.data.data.diet[i]['vitamin_b2'])) {
      data.data.data.diet[i]['vitamin_b2'] = 0;
    }
    if (parseInt(data.data.data.diet[i]['vitamin_c']) !== parseInt(data.data.data.diet[i]['vitamin_c'])) {
      data.data.data.diet[i]['vitamin_c'] = 0;
    }
    letEnergy._value.energy = letEnergy._value.energy + parseInt(data.data.data.diet[i]['energy']);

    protein._value.energy = protein._value.energy + parseInt(data.data.data.diet[i]['protein']);
    fat._value.energy = fat._value.energy + parseInt(data.data.data.diet[i]['fat']);
    carbohydrate._value.energy = carbohydrate._value.energy + parseInt(data.data.data.diet[i]['carbohydrate']);
    calcium._value.energy = calcium._value.energy + parseInt(data.data.data.diet[i]['calcium']);
    sodium._value.energy = sodium._value.energy + parseInt(data.data.data.diet[i]['sodium']);
    magnesium._value.energy = magnesium._value.energy + parseInt(data.data.data.diet[i]['magnesium']);
    iron._value.energy = iron._value.energy + parseInt(data.data.data.diet[i]['iron']);
    zinc._value.energy = zinc._value.energy + parseInt(data.data.data.diet[i]['zinc']);
    selenium._value.energy = selenium._value.energy + parseInt(data.data.data.diet[i]['selenium']);
    vitamin_a._value.energy = vitamin_a._value.energy + parseInt(data.data.data.diet[i]['vitamin_a']);
    vitamin_e._value.energy = vitamin_e._value.energy + parseInt(data.data.data.diet[i]['vitamin_e']);
    vitamin_b1._value.energy = vitamin_b1._value.energy + parseInt(data.data.data.diet[i]['vitamin_b1']);
    vitamin_b2._value.energy = vitamin_b2._value.energy + parseInt(data.data.data.diet[i]['vitamin_b2']);
    vitamin_c._value.energy = vitamin_c._value.energy + parseInt(data.data.data.diet[i]['vitamin_c']);
  }



  letEnergy._value.start = data.data.data.packAge[0].start_package;
  letEnergy._value.end = data.data.data.packAge[0].end_package;
  letEnergy._value.keyword = '✔ 正常';
  letEnergy._value.color = 'everyBlack';

  //能量
  if (letEnergy._value.energy < letEnergy._value.start) {

    letEnergy._value.keyword = '▼ 不足';
    letEnergy._value.color = 'everyRed';
    kcalType.value = 3
  } else if (letEnergy._value.energy > letEnergy._value.end) {

    letEnergy._value.keyword = '▲ 超标';
    letEnergy._value.color = 'everyOrange';
    kcalType.value = 1
  }

  //蛋白质
  protein._value.start = data.data.data.packAge[1].start_package;
  protein._value.end = data.data.data.packAge[1].end_package;
  protein._value.keyword = '✔ 正常';
  protein._value.color = 'everyBlack';
  if (protein._value.energy < protein._value.start) {
    protein._value.keyword = '▼ 不足';
    protein._value.color = 'everyRed';
  } else if (protein._value.energy > protein._value.end) {
    protein._value.keyword = '▲ 超标';
    protein._value.color = 'everyOrange';
  }
  //脂肪
  fat._value.start = data.data.data.packAge[2].start_package;
  fat._value.end = data.data.data.packAge[2].end_package;
  fat._value.keyword = '✔ 正常';
  fat._value.color = 'everyBlack';
  if (fat._value.energy < fat._value.start) {
    fat._value.keyword = '▼ 不足';
    fat._value.color = 'everyRed';
  } else if (fat._value.energy > fat._value.end) {
    fat._value.keyword = '▲ 超标';
    fat._value.color = 'everyOrange';
  }
  //碳水化合物
  carbohydrate._value.start = data.data.data.packAge[3].start_package;
  carbohydrate._value.end = data.data.data.packAge[3].end_package;
  carbohydrate._value.keyword = '✔ 正常';
  carbohydrate._value.color = 'everyBlack';
  if (carbohydrate._value.energy < carbohydrate._value.start) {
    carbohydrate._value.keyword = '▼ 不足';
    carbohydrate._value.color = 'everyRed';
  } else if (carbohydrate._value.energy > carbohydrate._value.end) {
    carbohydrate._value.keyword = '▲ 超标';
    carbohydrate._value.color = 'everyOrange';
  }

  //钙
  calcium._value.start = data.data.data.packAge[4].start_package;
  calcium._value.end = data.data.data.packAge[4].end_package;
  calcium._value.keyword = '✔ 正常';
  calcium._value.color = 'everyBlack';
  if (calcium._value.energy < calcium._value.start) {
    calcium._value.keyword = '▼ 不足';
    calcium._value.color = 'everyRed';
  } else if (calcium._value.energy > calcium._value.end) {
    calcium._value.keyword = '▲ 超标';
    calcium._value.color = 'everyOrange';
  }
  //钠
  sodium._value.start = data.data.data.packAge[5].start_package;
  sodium._value.end = data.data.data.packAge[5].end_package;
  sodium._value.keyword = '✔ 正常';
  sodium._value.color = 'everyBlack';
  if (sodium._value.energy < sodium._value.start) {
    sodium._value.keyword = '▼ 不足';
    sodium._value.color = 'everyRed';
  } else if (sodium._value.energy > sodium._value.end) {
    sodium._value.keyword = '▲ 超标';
    sodium._value.color = 'everyOrange';
  }
  //镁
  magnesium._value.start = data.data.data.packAge[6].start_package;
  magnesium._value.end = data.data.data.packAge[6].end_package;
  magnesium._value.keyword = '✔ 正常';
  magnesium._value.color = 'everyBlack';
  if (magnesium._value.energy < magnesium._value.start) {
    magnesium._value.keyword = '▼ 不足';
    magnesium._value.color = 'everyRed';
  } else if (magnesium._value.energy > magnesium._value.end) {
    magnesium._value.keyword = '▲ 超标';
    magnesium._value.color = 'everyOrange';
  }
  //铁
  iron._value.start = data.data.data.packAge[7].start_package;
  iron._value.end = data.data.data.packAge[7].end_package;
  iron._value.keyword = '✔ 正常';
  iron._value.color = 'everyBlack';
  if (iron._value.energy < iron._value.start) {
    iron._value.keyword = '▼ 不足';
    iron._value.color = 'everyRed';
  } else if (iron._value.energy > iron._value.end) {
    iron._value.keyword = '▲ 超标';
    iron._value.color = 'everyOrange';
  }
  //锌
  zinc._value.start = data.data.data.packAge[8].start_package;
  zinc._value.end = data.data.data.packAge[8].end_package;
  zinc._value.keyword = '✔ 正常';
  zinc._value.color = 'everyBlack';
  if (zinc._value.energy < zinc._value.start) {
    zinc._value.keyword = '▼ 不足';
    zinc._value.color = 'everyRed';
  } else if (zinc._value.energy > zinc._value.end) {
    zinc._value.keyword = '▲ 超标';
    zinc._value.color = 'everyOrange';
  }
  //硒
  selenium._value.start = data.data.data.packAge[9].start_package;
  selenium._value.end = data.data.data.packAge[9].end_package;
  selenium._value.keyword = '✔ 正常';
  selenium._value.color = 'everyBlack';
  if (selenium._value.energy < selenium._value.start) {
    selenium._value.keyword = '▼ 不足';
    selenium._value.color = 'everyRed';
  } else if (selenium._value.energy > selenium._value.end) {
    selenium._value.keyword = '▲ 超标';
    selenium._value.color = 'everyOrange';
  }
  // 维生素A
  vitamin_a._value.start = data.data.data.packAge[10].start_package;
  vitamin_a._value.end = data.data.data.packAge[10].end_package;
  vitamin_a._value.keyword = '✔ 正常';
  vitamin_a._value.color = 'everyBlack';
  if (vitamin_a._value.energy < vitamin_a._value.start) {
    vitamin_a._value.keyword = '▼ 不足';
    vitamin_a._value.color = 'everyRed';
  } else if (vitamin_a._value.energy > vitamin_a._value.end) {
    vitamin_a._value.keyword = '▲ 超标';
    vitamin_a._value.color = 'everyOrange';
  }
  //维生素E
  vitamin_e._value.start = data.data.data.packAge[11].start_package;
  vitamin_e._value.end = data.data.data.packAge[11].end_package;
  vitamin_e._value.keyword = '✔ 正常';
  vitamin_e._value.color = 'everyBlack';
  if (vitamin_e._value.energy < vitamin_e._value.start) {
    vitamin_e._value.keyword = '▼ 不足';
    vitamin_e._value.color = 'everyRed';
  } else if (vitamin_e._value.energy > vitamin_e._value.end) {
    vitamin_e._value.keyword = '▲ 超标';
    vitamin_e._value.color = 'everyOrange';
  }
  //维生素B1
  vitamin_b1._value.start = data.data.data.packAge[12].start_package;
  vitamin_b1._value.end = data.data.data.packAge[12].end_package;
  vitamin_b1._value.keyword = '✔ 正常';
  vitamin_b1._value.color = 'everyBlack';
  if (vitamin_b1._value.energy < vitamin_b1._value.start) {
    vitamin_b1._value.keyword = '▼ 不足';
    vitamin_b1._value.color = 'everyRed';
  } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
    vitamin_b1._value.keyword = '▲ 超标';
    vitamin_b1._value.color = 'everyOrange';
  }
  //维生素B2
  vitamin_b2._value.start = data.data.data.packAge[13].start_package;
  vitamin_b2._value.end = data.data.data.packAge[13].end_package;
  vitamin_b2._value.keyword = '✔ 正常';
  vitamin_b2._value.color = 'everyBlack';
  if (vitamin_b2._value.energy < vitamin_b2._value.start) {
    vitamin_b2._value.keyword = '▼ 不足';
    vitamin_b2._value.color = 'everyRed';
  } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
    vitamin_b2._value.keyword = '▲ 超标';
    vitamin_b2._value.color = 'everyOrange';
  }
  //维生素C
  vitamin_c._value.start = data.data.data.packAge[14].start_package;
  vitamin_c._value.end = data.data.data.packAge[14].end_package;
  vitamin_c._value.keyword = '✔ 正常';
  vitamin_c._value.color = 'everyBlack';
  if (vitamin_c._value.energy < vitamin_c._value.start) {
    vitamin_c._value.keyword = '▼ 不足';
    vitamin_c._value.color = 'everyRed';
  } else if (vitamin_c._value.energy > vitamin_c._value.end) {
    vitamin_c
    vitamin_c._value.keyword = '▲ 超标';
    vitamin_c._value.color = 'everyOrange';
  }
}

onMounted(() => {
  fetchData()
})

const onKeep = async () => {
  let params = form._rawValue
  params['reportId'] = reportId.value
  const res = await api.setAdvice(params);
  if (res.data.code === 1) {
    ElNotification({
      title: '建议保存成功',
      message: res.data.msg,
      type: 'success',
    })
    return false;
  } else {
    ElNotification({
      title: '建议保存失败',
      message: res.data.msg,
      type: 'error',
    })
    return false;
  }
}

function $getTimes(params) {
  var date = new Date(params);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y + "-" + m + "-" + d;
  return time;
}

const onClickPrint = () => {
  let printParam = '';
  if (username.value && guardian.value && birthStatus.value) {
    printParam = "/" + username.value + "/" + guardian.value + "/" + birthStatus.value;
  }
  if (typeActive.value === '全部') {
    let PrintAll = router.resolve({
      path: "/ChronicPrintAll/" + groupId.value + "/" + id.value + "/" + reportId.value + printParam
    });
    window.open(PrintAll.href, "_blank");
  } else {

    switch (typeActive.value) {
      case '基本信息':
        let PrintMember = router.resolve({
          path: "/ChronicPrintMember/" + groupId.value + "/" + id.value + "/" + reportId.value + printParam
        });
        window.open(PrintMember.href, "_blank");
        break
      case '体成分分析':
        let PrintAnalysis = router.resolve({
          path: "/ChronicPrintAnalysis/" + groupId.value + "/" + id.value + "/" + reportId.value + printParam
        });
        window.open(PrintAnalysis.href, "_blank");
        break
      case '膳食营养分析':
        let PrintComposition = router.resolve({
          path: "/ChronicPrintComposition/" + groupId.value + "/" + id.value + "/" + reportId.value + printParam
        });
        window.open(PrintComposition.href, "_blank");
        break
      case '慢性病人生长发育曲线图':
        let PrintDiagram = router.resolve({
          path: "/AdultPrintDiagram/" + groupId.value + "/" + id.value + "/" + reportId.value + printParam
        });
        window.open(PrintDiagram.href, "_blank");
        break
      case '喂养习惯报告':
        let PrintFeedhabits = router.resolve({
          path: "/AdultPrintFeedhabits/" + groupId.value + "/" + id.value + "/" + reportId.value + printParam
        });
        window.open(PrintFeedhabits.href, "_blank");
        break
      case '营养处方报告':
        let PrintPrescription = router.resolve({
          path: "/AdultPrintPrescription/" + groupId.value + "/" + id.value + "/" + reportId.value + printParam
        });
        window.open(PrintPrescription.href, "_blank");
        break
    }

    // print(typeActive.value)
  }
}
onMounted(() => { // 需要获取到element,所以是onMounted的Hook
  http.get('api/gravida/viewreport?id=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {
    console.log(res.data, '777')
    proposal.value = res.data.data.foodselection.filter((item, index) => {
      return item.up_type == 2
    })
    proposal1.value = res.data.data.foodselection.filter((item, index) => {
      return item.up_type == 1
    })
    proposal2.value = res.data.data.foodselection.filter((item, index) => {
      return item.up_type == 3
    })

    data.value = res.data.data
    // 能量
    if (letEnergy._value.energy < letEnergy._value.start) {
      principle.value = data.value.foodliving[2].content;
      energys.value = data.value.foodmotion[2].content;
      letEnergy._value.keyword = '▼ 不足';
      letEnergy._value.color = 'everyRed';
      kcalType.value = 3
    } else if (letEnergy._value.energy > letEnergy._value.end) {
      principle.value = data.value.foodliving[1].content;
      energys.value = data.value.foodmotion[0].content;
      letEnergy._value.keyword = '▲ 超标';
      letEnergy._value.color = 'everyOrange';
      kcalType.value = 1
    } else {
      principle.value = data.value.foodliving[0].content;
      energys.value = data.value.foodmotion[1].content;
    }
    //  蛋白质
    if (protein._value.energy < protein._value.start) {
      proteins.value = data.value.foodmotion[5].content;
      protein._value.keyword = '▼ 不足';
      protein._value.color = 'everyRed';
    } else if (protein._value.energy > protein._value.end) {
      proteins.value = data.value.foodmotion[3].content;
      protein._value.keyword = '▲ 超标';
      protein._value.color = 'everyOrange';
    } else {
      proteins.value = data.value.foodmotion[4].content;
    }
    //脂肪
    if (fat._value.energy < fat._value.start) {
      fats.value = data.value.foodmotion[8].content;
      fats._value.keyword = '▼ 不足';
      fat._value.color = 'everyRed';
    } else if (fat._value.energy > fat._value.end) {
      fats.value = data.value.foodmotion[6].content;
      fat._value.keyword = '▲ 超标';
      fat._value.color = 'everyOrange';
    } else {
      fats.value = data.value.foodmotion[7].content;
    }
    //碳水化合物
    if (carbohydrate._value.energy < carbohydrate._value.start) {
      carbohydrates.value = data.value.foodmotion[11].content;
      carbohydrate._value.keyword = '▼ 不足';
      carbohydrate._value.color = 'everyRed';
    } else if (carbohydrate._value.energy > carbohydrate._value.end) {
      carbohydrates.value = data.value.foodmotion[9].content;
      carbohydrate._value.keyword = '▲ 超标';
      carbohydrate._value.color = 'everyOrange';
    } else {
      carbohydrates.value = data.value.foodmotion[10].content;
    }
    //钙
    if (calcium._value.energy < calcium._value.start) {
      calciums.value = data.value.foodmotion[14].content;
      calcium._value.keyword = '▼ 不足';
      calcium._value.color = 'everyRed';
    } else if (calcium._value.energy > calcium._value.end) {
      calciums.value = data.value.foodmotion[12].content;
      calcium._value.keyword = '▲ 超标';
      calcium._value.color = 'everyOrange';
    } else {
      calciums.value = data.value.foodmotion[13].content;
    }
    //钠
    if (sodium._value.energy < sodium._value.start) {
      sodiums.value = data.value.foodmotion[17].content;
      sodium._value.keyword = '▼ 不足';
      sodium._value.color = 'everyRed';
    } else if (sodium._value.energy > sodium._value.end) {
      sodiums.value = data.value.foodmotion[15].content;
      sodium._value.keyword = '▲ 超标';
      sodium._value.color = 'everyOrange';
    } else {
      sodiums.value = data.value.foodmotion[16].content;
    }
    //镁
    if (magnesium._value.energy < magnesium._value.start) {
      magnesiums.value = data.value.foodmotion[20].content;
      magnesium._value.keyword = '▼ 不足';
      magnesium._value.color = 'everyRed';
    } else if (magnesium._value.energy > magnesium._value.end) {
      magnesiums.value = data.value.foodmotion[18].content;
      magnesium._value.keyword = '▲ 超标';
      magnesium._value.color = 'everyOrange';
    } else {
      magnesiums.value = data.value.foodmotion[19].content;
    }
    //铁
    if (iron._value.energy < iron._value.start) {
      irons.value = data.value.foodmotion[23].content;
      iron._value.keyword = '▼ 不足';
      iron._value.color = 'everyRed';
    } else if (iron._value.energy > iron._value.end) {
      irons.value = data.value.foodmotion[21].content;
      iron._value.keyword = '▲ 超标';
      iron._value.color = 'everyOrange';
    } else {
      irons.value = data.value.foodmotion[22].content;
    }
    //锌
    if (zinc._value.energy < zinc._value.start) {
      zincs.value = data.value.foodmotion[26].content;
      zinc._value.keyword = '▼ 不足';
      zinc._value.color = 'everyRed';
    } else if (zinc._value.energy > zinc._value.end) {
      zincs.value = data.value.foodmotion[24].content;
      zinc._value.keyword = '▲ 超标';
      zinc._value.color = 'everyOrange';
    } else {
      zincs.value = data.value.foodmotion[25].content;
    }
    //硒
    if (selenium._value.energy < selenium._value.start) {
      seleniums.value = data.value.foodmotion[29].content;
      selenium._value.keyword = '▼ 不足';
      selenium._value.color = 'everyRed';
    } else if (selenium._value.energy > selenium._value.end) {
      seleniums.value = data.value.foodmotion[27].content;
      selenium._value.keyword = '▲ 超标';
      selenium._value.color = 'everyOrange';
    } else {
      seleniums.value = data.value.foodmotion[28].content;
    }
    //维生素A
    if (vitamin_a._value.energy < vitamin_a._value.start) {
      vitamin_as.value = data.value.foodmotion[32].content;
      vitamin_a._value.keyword = '▼ 不足';
      vitamin_a._value.color = 'everyRed';
    } else if (vitamin_a._value.energy > vitamin_a._value.end) {
      vitamin_as.value = data.value.foodmotion[30].content;
      vitamin_a._value.keyword = '▲ 超标';
      vitamin_a._value.color = 'everyOrange';
    } else {
      vitamin_as.value = data.value.foodmotion[31].content;
    }
    //维生素E
    if (vitamin_e._value.energy < vitamin_e._value.start) {
      vitamin_es.value = data.value.foodmotion[35].content;
      vitamin_e._value.keyword = '▼ 不足';
      vitamin_e._value.color = 'everyRed';
    } else if (vitamin_e._value.energy > vitamin_e._value.end) {
      vitamin_es.value = data.value.foodmotion[33].content;
      vitamin_e._value.keyword = '▲ 超标';
      vitamin_e._value.color = 'everyOrange';
    } else {
      vitamin_es.value = data.value.foodmotion[34].content;
    }
    //维生素B1
    if (vitamin_b1._value.energy < vitamin_b1._value.start) {
      vitamin_b1s.value = data.value.foodmotion[38].content;
      vitamin_b1._value.keyword = '▼ 不足';
      vitamin_b1._value.color = 'everyRed';
    } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
      vitamin_b1s.value = data.value.foodmotion[36].content;
      vitamin_b1._value.keyword = '▲ 超标';
      vitamin_b1._value.color = 'everyOrange';
    } else {
      vitamin_b1s.value = data.value.foodmotion[37].content;
    }
    //维生素B2
    if (vitamin_b2._value.energy < vitamin_b2._value.start) {
      vitamin_b2s.value = data.value.foodmotion[41].content;
      vitamin_b2._value.keyword = '▼ 不足';
      vitamin_b2._value.color = 'everyRed';
    } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
      vitamin_b2s.value = data.value.foodmotion[39].content;
      vitamin_b2._value.keyword = '▲ 超标';
      vitamin_b2._value.color = 'everyOrange';
    } else {
      vitamin_b2s.value = data.value.foodmotion[40].content;
    }
    //维生素C
    if (vitamin_c._value.energy < vitamin_c._value.start) {
      vitamin_cs.value = data.value.foodmotion[44].content;
      vitamin_c._value.keyword = '▼ 不足';
      vitamin_c._value.color = 'everyRed';
    } else if (vitamin_c._value.energy > vitamin_c._value.end) {
      vitamin_cs.value = data.value.foodmotion[42].content;
      vitamin_c._value.keyword = '▲ 超标';
      vitamin_c._value.color = 'everyOrange';
    } else {
      vitamin_cs.value = data.value.foodmotion[43].content;
    }


    early_intervention.value = res.data.data.high_contents.intervention_one + res.data.data.high_contents.intervention_two + res.data.data.high_contents.intervention_three;
    Monitoring_content.value = res.data.data.high_contents.family_1 + res.data.data.high_contents.family_2 + res.data.data.high_contents.family_3 + res.data.data.high_contents.family_4 + res.data.data.high_contents.family_5 + res.data.data.high_contents.family_6 + res.data.data.high_contents.family_7 + res.data.data.high_contents.family_8 + res.data.data.high_contents.family_9 + res.data.data.high_contents.family_10 + res.data.data.high_contents.family_11 + res.data.data.high_contents.family_12 + res.data.data.high_contents.family_13
    high_contents.value = res.data.data.high_contents
    hospital_name.value = res.data.data.hospital_name
    diet.value = res.data.data.diet
    pagoda.value = res.data.data.pagoda
    // proposal.filter((ite,index)=>{
    //     return ite.food_product_id==pagoda.food_product_id

    // })

    // principle.value = res.data.data.foodliving
    intake.value = res.data.data.foodmotion


    let color = ["#3EA4AA"];
    let color1 = ["#D0443B", "#3EA4AA"];
    let color2 = ["#D0443B", "#3EA4AA"];
    let xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
    var arr = [];
    var arr2 = [];
    var parr = res.data.data.contents.primaryHeight;
    for (let i = 0; i < parr.length; i++) {
      arr.push(parr[i].content);
      arr2.push(parr[i].month);
    }
    var arr1 = [];
    var arr3 = [];
    var parr1 = res.data.data.contents.primaryWeight;
    for (let i = 0; i < parr1.length; i++) {
      arr1.push(parr1[i].content);
      arr3.push(parr1[i].month);
    }

    var myChart = echarts.init(document.getElementById("myChart1"));
    myChart.value = myChart;
    myChart.setOption({
      backgroundColor: "#fff",
      color: color,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function () {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "次数",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: xAxisData
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "BMI值",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "dotted"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: [
                "rgba(83,148,208,0.15)",
                "rgba(103,194,58,0.15)",
                "rgba(226,203,80,0.15)",
                "rgba(226,115,80,0.15)"
              ]
            }
          }
        }
      ],
      series: [
        {
          name: "我的",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: res.data.data.contents.sumBmi
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    });

    var myChart1 = echarts.init(document.getElementById("myChart2"));
    myChart1.value = myChart1;
    myChart1.setOption({
      backgroundColor: "#fff",
      color: color1,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function () {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "月份",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: arr2
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "身高",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }
        }
      ],
      series: [
        {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color1[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arr
        },
        {
          name: "我的",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color1[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: res.data.data.contents.sumHeight
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart1.resize();
    });

    var myChart2 = echarts.init(document.getElementById("myChart3"));
    myChart2.value = myChart2;
    myChart2.setOption({
      backgroundColor: "#fff",
      color: color2,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function () {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "月份",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: arr3
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "体重",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }
        }
      ],
      series: [
        {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "white",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arr1
        },
        {
          name: "我的",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: res.data.data.contents.sumWeight
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart2.resize();
    });
  })

});

const print = (el) => {
  PrintJS({
    printable: el,
    type: 'html',
    header: null,
    targetStyles: ['*'],
    style: "@page {margin:0 10mm}"
  })
}
</script>

<style scoped>
.biao1 {
  width: 25%;
  border-bottom: 1px solid #ff5722;
  border-right: 1px solid #ff5722;
  background-color: #ff5722;
  color:#fff;
}

.biao5 {
  width: 25%;
  border-right: 1px solid #ff5722;
  background-color: #ff5722;
  color:#fff;
}

.biao6 {
  width: 25%;
  border-right: 1px solid #ff5722;
  color:#fff;
}

.biao2 {
  width: 25%;
  border-bottom: 1px solid #ff5722;
  border-right: 1px solid #ff5722;
  color:#fff;
}

.biao3 {
  width: 25%;
  border-bottom: 1px solid #ff5722;
  background-color: #ff5722;
  color:#fff;
}

.biao4 {
  width: 25%;
  border-bottom: 1px solid #ff5722;
  color:black;
}

.biao7 {
  width: 25%;
  color:#fff;
}

#proposal {
  width: 1075px;
  height: 456px;
  background: url('../assets/img/report_proposal.png');

}

/deep/ #elTextThree {
  width: 100%;
}

/deep/.el-textarea__inner {
  width: 946px;
  height: 157px;
  border-radius: 30px;
  border: 1px solid #ff5722;
}

/deep/.el-textarea__inner .red {
  width: 946px;
  height: 157px;
  border-radius: 30px;
  border: 1px solid #ff5722;
}

#elTextTwo {
  background: #ff5722;
}

/deep/.el-textarea {
  width: 80%;
  margin-left: 70px;
}

.params {
  width: 100%;
  font-size: 22px;
  font-weight: bold;
}

.shu {
  width: 5px;
  height: 30px;
  background: #ff5722;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
  margin-left: 5%;
}

.shured {
  width: 5px;
  height: 30px;
  background: red;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
  margin-left: 5%;
}

.right-box-card {
  width: 100%;
  margin-left: 0%;
}

.el-card.is-always-shadow {
  box-shadow: none;
}

.el-card {
  border: none;
}

.report {
  /*width: 595px;*/
  /*height: 842px;*/
}

.titles {
  margin-right: 20px;
}


#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
  height: 100px;
  margin-top: 100px;
}

#basic #createTime {
  font-size: 16px;
  color: #999999;
  margin-left: 70%;
}

.subTitle {
  font-size: 30px;
  text-align: center;
  height: 40px;
  color: #ff5722;
  /*border-bottom: 1px dashed  red;*/
}

#two {
  width: 1075px;
  height: 1244px;
  border-left: 1px #999999 solid;
  border-right: 1px #999999 solid;
  margin: 0 auto 0 auto;
}

#basic {
  font-size: 14px;
  width: 1075px;
  min-height: 1244px;
  overflow: hidden;
  padding: 0;
  word-break: break-all;
  margin: 60px auto 0 auto;
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  background-color: var(--el-card-bg-color);
  /* color: var(--el-text-color-primary); */
  transition: var(--el-transition-duration);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-color-white);
}

#basic .symptom_title {
  font-size: 20px;
  margin-top: 30px;
}

.every {
  height: 55px;
  line-height: 55px;
  width: 23%;
  float: left;
  margin-left: 10%;
  font-weight: bold;
}

#basic .symptom {
  text-align: left;
  line-height: 35px;

}

#basic .symptom .every {
  width: 30%;
  float: left;
  margin-left: 2%;
}

.symptom_content {
  width: 100%;
  float: left;
  margin-left: 120px;
}

#analMan {
  margin-top: 2%;
  text-align: center;
  color: #fff;
  width: 60%;
  float: left;
}

#analMan #imgMan {
  float: left;
}

#analMan #imgFat {
  margin-left: 80%;
  /*width: 379px;*/
  height: 35px;
  line-height: 35px;
  background: #e88f73;
  opacity: 1;
}

#analMan #imgBone {
  margin-left: 80%;
  width: 379px;
  height: 53px;
  line-height: 53px;
  background: #b1d964;
  opacity: 1;
}

#analMan #imgProtein {
  margin-left: 80%;
  width: 379px;
  height: 53px;
  line-height: 53px;
  background: #e8ba73;
  opacity: 1;
}

#analMan #imgWater {
  margin-left: 80%;
  width: 379px;
  height: 193px;
  line-height: 193px;
  background: #6ba9e4;
  opacity: 1;
}

.service_plate {
  background: url('../assets/img/evaluaction_service_plate.png') center no-repeat;
}

.dietOn {
  height: 500px;
}

.everyRed {
  color: red;
}

.everyOrange {
  color: orange;
}

.everyBlack {
  color: #333333;
}

.time-botton {
  clear: both;
  background-color: #ff5722;
  width: 108px;
  height: 41px;
  color: #fff;
  font-size: 16px;
  border-radius: 100px;
  line-height: 41px;
  margin: 40px 0 0 40px;
  text-align: center;
}

.time-type {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #85CE61;
  border-radius: 50%;
  opacity: 1;
  color: #fff;
  box-shadow: 5px 5px 2px #888888;
  margin: 20px 0 20px 40%;
}

.der {
  width: 354px;
  height: 241px;
  background: url("../assets/img/evaluaction_service_plate.png") 100% 100%;
}

.platesFoods {
  margin-top: 5px;
  margin-left: 8px;

  color: #333333;
  font-size: 16px;
}

.platesFoods div {
  padding-bottom: 18px;

}

.platesFoods span {
  color: #666666;
}

.plates {
  width: 33%;
  float: left;
}

.plates .plates-top-img {
  float: left;
  margin-left: 1%;
}

.time-left-color {
  background: #85CE61;
}

.time-common-color {
  background: #E8B973;
}

.time-right-color {
  background: #6EA9E0;
}
</style>
